<script setup>
import {ref, defineEmits, defineProps, reactive, watch} from 'vue'
import api from '@/api/index.js'
import { useRoute, useRouter } from "vue-router"
const route = useRoute()
const router = useRouter()
import { userStore } from '@/stores/user.js'
const user = userStore()

const emit = defineEmits(['emitCloseSelectClassify', 'emitChangeCity', 'emitChangeSort'])
const props = defineProps({
  watchChangeCity: Number,
  type: String
})

const classifyId = ref(route.query.classifyId)
if (!classifyId.value) {
  classifyId.value = 'all'
}


const menuRef = ref(null)
const cityRef = ref(null)

const categoryRef = ref(null)

const categoryList = ref([])

const update = ref(false)

const _getScenicCategoryList = () => {
  api.getScenicCategoryList({
    kindId: 0, // 0票务、1商超
  }).then((res) => {
    categoryList.value = [{
      classifyName: '全部景点',
      id: 'all'
    }]
    categoryList.value = [...categoryList.value, ...res.data]
    if (props.type !== 'attractionTickets') {
      categoryList.value = []
    }
  })
}
_getScenicCategoryList()

const openType = ref('')
const closeSelectClassify = () => {
  openType.value = ''
  if (update.value) {
    emit('emitCloseSelectClassify', classifyId.value)
  }
}

const openDropdown = (key) => {
  update.value = false
  openType.value = key
}

const classifyClick = (item) => {
  update.value = true
  categoryRef.value.toggle()
  if (classifyId.value === item.id) {
    if (item.id !== 'all') {
      classifyId.value = ''
    }
  } else {
    classifyId.value = item.id
  }
  router.push({
    path: '/result/list',
    query: {
      ...route.query,
      classifyId: item.id ?? ''
    }
  })
}

const getClassName = () => {
  if (props.type !== 'attractionTickets') {
    return '全部分类'
  }
  const data = categoryList.value.find((item) => {
    return classifyId.value === item.id
  })
  return data?.classifyName ?? '全部景点'
}

const cityList = ref([])

const _getAddressDistrictTree = () => {
  const params = {
    level: 3,
    pid: user.city.id
  }
  api.getAddressDistrictTree(params).then((res) => {
    console.log('res', res)
    // res.data.forEach(obj => {
    //   delete obj.children;
    // });
    cityList.value = res.data
  })
}
_getAddressDistrictTree({
  level: 2
})

const city = ref(null)
const cityChange = (e) => {
  update.value = true
  city.value = e.selectedOptions[0]
}
const cityChangeClick = (item) => {
  if (item.code === city.value?.code) {
    city.value = null
  } else {
    city.value = item
  }
  update.value = true
  cityRef.value.toggle()
  openType.value = ''
  emit('emitChangeCity', city.value)
}
watch(() => props.watchChangeCity, () => {
  _getAddressDistrictTree()
  city.value = null
})

const closeSelectSort = () => {
  openType.value = ''
}

const sortRef = ref(null)
const sortList = [
  {
    name: '低价优先',
    id: 1
  },
  {
    name: '高价优先',
    id: 0
  },
]

const sortKey = ref('')
const sortName = ref('')
const sortClick = (item) => {
  if (sortKey.value === item.id) {
    sortKey.value = ''
    sortName.value = ''
  } else {
    sortKey.value = item.id
    sortName.value = item.name
  }
  sortRef.value.toggle()
  emit('emitChangeSort', sortKey.value)
}
const customFieldName = {
  text: 'label',
  value: 'id',
};

</script>

<template>
  <ul class="filter">
    <van-dropdown-menu class="van_dropdown" ref="menuRef1">
      <van-dropdown-item ref="categoryRef" @close="closeSelectClassify" @open="openDropdown('category')">
        <template #title>
          <div>
            <span
              class="title"
              :class="{ 'title_active': openType === 'category' || classifyId && classifyId !== 'all' }"
            >
              {{ getClassName() }}
            </span>
            <van-icon class="icon" name="play" :class="{ 'icon_active': openType === 'category' || classifyId && classifyId !== 'all' }" />
          </div>
        </template>
        <ul class="category_list">
          <li class="list" :class="{ 'list_action': classifyId === item.id }" v-for="item in categoryList" :key="item.id"
            @click="classifyClick(item)">
            {{ item.classifyName }}
          </li>
        </ul>
      </van-dropdown-item>
    </van-dropdown-menu>
    <van-dropdown-menu class="van_dropdown" ref="menuRef2">
      <van-dropdown-item ref="cityRef" @open="openDropdown('city')">
        <template #title>
          <div>
            <span class="title" :class="{ 'title_active': openType === 'city' || city}">
              {{city?.label || '位置区域'}}
            </span>
            <van-icon class="icon" name="play" :class="{ 'icon_active': openType === 'city' || city}" />
          </div>
        </template>
        <ul class="category_list">
          <li class="list" :class="{ 'list_action': city?.code === item.code }" v-for="item in cityList" :key="item.id"
              @click="cityChangeClick(item)">
            {{ item.label }}
          </li>
        </ul>
<!--        <van-picker :columns="columns" :show-toolbar="false" @change="cityChange"-->
<!--          :columns-field-names="customFieldName" />-->
      </van-dropdown-item>
    </van-dropdown-menu>

    <van-dropdown-menu class="van_dropdown" ref="menuRef">
      <van-dropdown-item ref="sortRef" @close="closeSelectSort" @open="openDropdown('sort')">
        <template #title>
          <div>
            <span
              class="title"
              :class="{ 'title_active': openType === 'sort' || sortKey || sortKey === 0 }"
            >
              {{sortName || '价格/等级'}}
            </span>
            <van-icon
              class="icon"
              name="play"
              :class="{ 'icon_active': openType === 'sort' || sortKey || sortKey === 0 }"
            />
          </div>
        </template>
        <ul class="sort">
          <li class="list" :class="{ list_active: sortKey === item.id }" v-for="item in sortList" :key="item.id"
            @click="sortClick(item)">
            <span>{{ item.name }}</span>
            <van-icon v-if="sortKey === item.id" name="success" color="#4FAC91" />
          </li>
        </ul>
      </van-dropdown-item>
    </van-dropdown-menu>
  </ul>
</template>

<style scoped lang="scss">
:deep(.van-dropdown-menu__bar) {
  height: auto;
  background-color: transparent;
  box-shadow: none;
}

:deep(.van-dropdown-menu__title:after) {
  display: none;
}

:deep(.van-overlay) {
  top: 1px;
}

.filter {
  margin-top: .5rem;
  margin-bottom: 1rem;
  display: flex;
  justify-content: space-around;

  .van_dropdown {
    flex: 1;
  }

  .title {
    margin-right: .5rem;
    font-size: 1.4rem;
    font-weight: bold;
    color: #333333;
    line-height: 1.6rem;
  }

  .icon {
    transform: rotate(90deg);
  }

  .title_active {
    color: var(--van-primary-color);
  }

  .icon_active {
    color: var(--van-primary-color);
  }

  .category_list {
    margin: 2rem 0 2.5rem 0;
    padding: 0 1.5rem;
    display: flex;
    flex-wrap: wrap;

    .list {
      padding: 0 1.5rem;
      height: 2.7rem;
      line-height: 2.7rem;
      border-radius: .5rem;
      margin-right: 1rem;
      margin-bottom: 1.5rem;
      font-size: 1.2rem;
      box-sizing: border-box;
      color: #666666;
      background: rgba(0, 0, 0, 0.05);
    }

    .list_action {
      color: #FFFFFF;
      background: var(--van-primary-color);
    }
  }

  .sort {
    padding: 1rem;

    .list {
      padding: 0 1.5rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 4rem;
      line-height: 4rem;
      font-size: 1.4rem;
      color: #666666;
    }

    .list_active {
      color: var(--van-primary-color)
    }
  }
}
</style>